<template>
<div>
    <van-nav-bar title="支付密码" left-arrow @click-left="onClickLeft" />
            <van-cell-group>
          <van-field
            v-model="pay_password"
            type="password"
            clearable
            placeholder="请输入六位支付密码"
            :error-message="error.pay_password"
          />
        </van-cell-group>
        <van-row class="a">六位支付密码</van-row>
       <van-button round class="btn" @click="UpPay_password">确认修改</van-button>

    </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)
export default {
  data () {
    return {
      pay_password: '',
      mobile: '',
      error: {
        pay_password: ''
      }
    }
  },
  created () {
    this.mobile = sessionStorage.getItem('mobile')
  },
  methods: {
    onClickLeft () {
      this.$router.push('/me')
    },
    async UpPay_password () {
      if (this.pay_password.length !== 6) {
        this.error.pay_password = '请输入六位支付密码'
        return false
      }

      const { data: res } = await this.$http.get('/upPay_password', { params: { mobile: this.mobile, pay_password: this.pay_password } })

      if (res.ok === 1) {
        Toast('修改成功!')
      }
    }
  }
}
</script>

<style scoped>
.btn {
  color: #fff;
  width: 73%;
  margin-left: 15%;
  margin-top: 15%;
  font-size: 127%;
  background: -webkit-linear-gradient(left, #fa1e8c 0, #fc1e56 100%);
}
.a{
  font-size: 15px;
  color:#ccc;
  margin-top: 15px;
  margin-left: 14px;
}
</style>
